<script>
import IndexNews from './components/IndexNews.vue'
import ChinaNews from './components/ChinaNews.vue'
import InterNews from './components/InterNews.vue'
import PicNews from './components/PicNews.vue'
export default {
  components:{
    IndexNews:IndexNews,
    //缩写
    ChinaNews,
    InterNews,
    PicNews,
  }
}
</script>

<template>
  <div class="container">
    <h1>Vue.js组件的应用</h1>
  </div>
  <div id="exTab1" class="container">
    <ul class="nav nav-pills">
      <li class="active">
        <a href="#1a" data-toggle="tab">首页</a>
      </li>
      <li><a href="#2a" data-toggle="tab">中国新闻</a>
      </li>
      <li><a href="#3a" data-toggle="tab">国际新闻</a>
      </li>
      <li><a href="#4a" data-toggle="tab">图片新闻</a>
      </li>
    </ul>

    <div class="tab-content clearfix">
      <div class="tab-pane active" id="1a">
        <IndexNews></IndexNews>
      </div>
      <div class="tab-pane" id="2a">
        <ChinaNews></ChinaNews>
      </div>
      <div class="tab-pane" id="3a">
        <InterNews></InterNews>
      </div>
      <div class="tab-pane" id="4a">
        <PicNews></PicNews>
      </div>
    </div>
  </div>

</template>

<style scoped></style>
